<!-- @format -->

<template>
  <div>
    <img class="bg_img" :src="animationUrl.url" alt="" />
    <div class="login_form">
      <div class="top_title">优质后台管理系统</div>
      <div class="write_form">
        <el-form
          :model="form"
          label-width="70px"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item class="form_button">
            <el-button @click="getLogin"> 登录 </el-button>
            <el-button @click="getReg"> 注册 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { LoginApi, RegisterApi } from "../../api/index";
import { localStorageUserinfo } from '../../utils/common/common'
export default {
  name: "LoginPage",
  data() {
    return {
      animationUrl: { url: require("../../assets/image/bg_img_house.gif") },
      form: {
        username: "admin1",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    getLogin() {
      LoginApi(this.form).then((res) => {
        if (res.data.code == 1) {
          localStorageUserinfo(res.data.token)
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 2500,
            onClose: () => {
              this.$router.replace({
                path: "/dashboard",
              });
            },
          });
        }else{
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    getReg() {
      RegisterApi(this.form).then((res) => {
        console.log(res, "res");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg_img {
  position: fixed;
  width: 100%;
  height: 100vh;
}
.login_form {
  position: fixed;
  z-index: 2;
  width: 420px;
  height: 400px;
  background-color: white;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  padding-top: 30px;
  box-sizing: border-box;
  .top_title {
    display: flex;
    font-size: 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .write_form {
    margin-top: 60px;
    padding: 0 40px;
    padding-right: 90px;
    .el-form-item__content {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
